/**
 * 首页
 */

import React, { Component } from 'react';
import { View, Image, Text, StatusBar, ScrollView, TouchableHighlight, StyleSheet } from "react-native";
import { Carousel, NavigationBar, Label, SearchInput, ListRow } from "teaset";

export default class Home extends Component {
    render() {
        return (
            <View style={{ flex: 1 }}>
                {/* 主体 */}  
                <ScrollView>
                    {/* 轮播 开始 */}
                    <Carousel style={styles.Carousel} control={
                        <Carousel.Control
                            style={{ alignItems: 'flex-end' }}
                            dot={<Text style={styles.CarouselDot}>○</Text>}
                            activeDot={<Text style={styles.CarouselDot}>●</Text>}
                        />
                    }>
                        <Image style={styles.CarouselImage} resizeMode='cover' source={require('../../images/1.jpg')} />
                        <Image style={styles.CarouselImage} resizeMode='cover' source={require('../../images/2.jpg')} />
                        <Image style={styles.CarouselImage} resizeMode='cover' source={require('../../images/3.jpg')} />
                        <Image style={styles.CarouselImage} resizeMode='cover' source={require('../../images/4.jpg')} />
                        <Image style={styles.CarouselImage} resizeMode='cover' source={require('../../images/5.jpg')} />
                    </Carousel>
                    {/* 轮播 结束 */}

                    {/* Grid九宫格 */}
                    <View style={styles.GridStyle}>
                        <TouchableHighlight onPress={() => (alert('11'))} underlayColor="pink" style={styles.TouchableHighlight}>
                            <View style={styles.titleAlignCenter}>
                                <View style={{
                                    width: 44,
                                    height: 44,
                                    backgroundColor: 'orange',
                                    borderRadius: 22,
                                    alignItems: 'center',
                                    justifyContent: 'center'
                                }}>
                                    <Image source={require('../../appIcons/book.png')} style={styles.imageStyle} />
                                </View>
                                <Text style={styles.title}>智能菜谱</Text>
                            </View>
                        </TouchableHighlight>
                        <TouchableHighlight onPress={() => (alert('11'))} underlayColor="pink" style={styles.TouchableHighlight}>
                            <View style={styles.titleAlignCenter}>
                                <View style={{
                                    width: 44,
                                    height: 44,
                                    backgroundColor: '#0f0',
                                    borderRadius: 22,
                                    alignItems: 'center',
                                    justifyContent: 'center'
                                }}>
                                    <Image source={require('../../appIcons/gridType.png')} style={styles.imageStyle} />
                                </View>
                                <Text style={styles.title}>商品分类</Text>
                            </View>
                        </TouchableHighlight>
                        <TouchableHighlight onPress={() => (alert('11'))} underlayColor="pink" style={styles.TouchableHighlight}>
                            <View style={styles.titleAlignCenter}>
                                <View style={{
                                    width: 44,
                                    height: 44,
                                    backgroundColor: 'blue',
                                    borderRadius: 22,
                                    alignItems: 'center',
                                    justifyContent: 'center'
                                }}>
                                    <Image source={require('../../appIcons/chat.png')} style={styles.imageStyle} />
                                </View>
                                <Text style={styles.title}>餐条交流</Text>
                            </View>
                        </TouchableHighlight>
                        <TouchableHighlight onPress={() => (alert('11'))} underlayColor="pink" style={styles.TouchableHighlight}>
                            <View style={styles.titleAlignCenter}>
                                <View style={{
                                    width: 44,
                                    height: 44,
                                    backgroundColor: 'green',
                                    borderRadius: 22,
                                    alignItems: 'center',
                                    justifyContent: 'center'
                                }}>
                                    <Image source={require('../../appIcons/chushi.png')} style={styles.imageStyle} />
                                </View>
                                <Text style={styles.title}>大师支招</Text>
                            </View>
                        </TouchableHighlight>
                        <TouchableHighlight onPress={() => (alert('11'))} underlayColor="pink" style={styles.TouchableHighlight}>
                            <View style={styles.titleAlignCenter}>
                                <View style={{
                                    width: 44,
                                    height: 44,
                                    backgroundColor: '#f0a',
                                    borderRadius: 22,
                                    alignItems: 'center',
                                    justifyContent: 'center'
                                }}>
                                    <Image source={require('../../appIcons/gift.png')} style={styles.imageStyle} />
                                </View>
                                <Text style={styles.title}>积分商城</Text>
                            </View>
                        </TouchableHighlight>
                        <TouchableHighlight onPress={() => (alert('11'))} underlayColor="pink" style={styles.TouchableHighlight}>
                            <View style={styles.titleAlignCenter}>
                                <View style={{
                                    width: 44,
                                    height: 44,
                                    backgroundColor: 'blue',
                                    borderRadius: 22,
                                    alignItems: 'center',
                                    justifyContent: 'center'
                                }}>
                                    <Image source={require('../../appIcons/gold.png')} style={styles.imageStyle} />
                                </View>
                                <Text style={styles.title}>签到领币</Text>
                            </View>
                        </TouchableHighlight>
                        <TouchableHighlight onPress={() => (alert('11'))} underlayColor="pink" style={styles.TouchableHighlight}>
                            <View style={styles.titleAlignCenter}>
                                <View style={{
                                    width: 44,
                                    height: 44,
                                    backgroundColor: 'green',
                                    borderRadius: 22,
                                    alignItems: 'center',
                                    justifyContent: 'center'
                                }}>
                                    <Image source={require('../../appIcons/quan.png')} style={styles.imageStyle} />
                                </View>
                                <Text style={styles.title}>卡券中心</Text>
                            </View>
                        </TouchableHighlight>
                        <TouchableHighlight onPress={() => (alert('11'))} underlayColor="pink" style={styles.TouchableHighlight}>
                            <View style={styles.titleAlignCenter}>
                                <View style={{
                                    width: 44,
                                    height: 44,
                                    backgroundColor: '#f0a',
                                    borderRadius: 22,
                                    alignItems: 'center',
                                    justifyContent: 'center'
                                }}>
                                    <Image source={require('../../appIcons/share.png')} style={styles.imageStyle} />
                                </View>
                                <Text style={styles.title}>分享有礼</Text>
                            </View>
                        </TouchableHighlight>
                        <TouchableHighlight onPress={() => (alert('11'))} underlayColor="pink" style={styles.TouchableHighlight}>
                            <View style={styles.titleAlignCenter}>
                                <View style={{
                                    width: 44,
                                    height: 44,
                                    backgroundColor: '#0f0',
                                    borderRadius: 22,
                                    alignItems: 'center',
                                    justifyContent: 'center'
                                }}>
                                    <Image source={require('../../appIcons/moneyPot.png')} style={styles.imageStyle} />
                                </View>
                                <Text style={styles.title}>直销中心</Text>
                            </View>
                        </TouchableHighlight>
                        <TouchableHighlight onPress={() => (alert('11'))} underlayColor="pink" style={styles.TouchableHighlight}>
                            <View style={styles.titleAlignCenter}>
                                <View style={{
                                    width: 44,
                                    height: 44,
                                    backgroundColor: 'orange',
                                    borderRadius: 22,
                                    alignItems: 'center',
                                    justifyContent: 'center'
                                }}>
                                    <Image source={require('../../appIcons/all.png')} style={styles.imageStyle} />
                                </View>
                                <Text style={styles.title}>全部</Text>
                            </View>
                        </TouchableHighlight>
                    </View>
                    {/* Grid九宫格 结束 */}

                </ScrollView>
                {/* 首页 搜索导航栏 */}
                <NavigationBar
                    style={styles.NavigationBar}
                    title={
                        <SearchInput
                            style={styles.SearchInput}
                            iconSize={16}
                            placeholder='搜索您店铺需要的菜品或调味品'
                            inputStyle={styles.inputStyle}
                        />
                    }
                    leftView={<NavigationBar.IconButton icon={require('../../appIcons/type.png')} />}
                    rightView={<NavigationBar.IconButton icon={require('../../appIcons/news.png')} />}
                />
                {/* 首页 搜索导航栏  结束 */}

                {/* 系统状态栏 */}
                <StatusBar androidStatusBarColor='rgba(176,13,13,0.54)' translucent={true}//指定状态栏是否透明。设置为true时，应用会在状态栏之下绘制（即所谓“沉浸式”——被状态栏遮住一部分）。常和带有半透明背景色的状态栏搭配使用。  
                />
            </View>
        )
    }
}

const styles = StyleSheet.create({
    NavigationBar: {
        backgroundColor: 'rgba(0,0,0,0)'
    },
    SearchInput: {
        width: '96%',
        backgroundColor: 'rgba(0,0,0,0.1)',
        borderWidth: 0
    },
    inputStyle: {
        color: '#f5f5f5'
    },
    Carousel: {
        height: 238
    },
    CarouselDot: {
        backgroundColor: 'rgba(0, 0, 0, 0)',
        color: '#5bc0de',
        padding: 4
    },
    CarouselImage: {
        width: '100%',
        height: 238
    },
    GridStyle: {
        flexDirection: 'row',
        flexWrap: 'wrap',
        backgroundColor: '#fefefe',
        paddingBottom:3
    },
    TouchableHighlight: {
        alignItems: 'center',
        height: 76,
        paddingBottom: 8, 
        paddingTop: 8,
        width: '20%'
    },
    imageItem: {
        width: 44,
        height: 44,
        backgroundColor: '#f0a',
        borderRadius: 22,
        alignItems: 'center',
        justifyContent: 'center'
    },
    imageStyle: {
        width: 30,
        height: 30
    },
    titleAlignCenter: {
        alignItems: 'center'
    },
    title: {
        color: "#333",
        height: 20,
        alignItems: 'center',
        paddingTop:4
    }
})